<template>
	<!--
	本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2651
	uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
	uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
	unicloud-db 组件文档：https://uniapp.dcloud.io/uniCloud/unicloud-db
	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
	 -->
	<view class="list">
		<!-- 刷新页面后的顶部提示框 -->
		<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
		<view v-if="isLoad" class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条最新新闻动态</view>
		<view v-if="!isLoad" class="tips-ani demo-bg gui-dark-bg-level-3 gui-border-radius"></view>
		<!-- 页面分类标题 -->
		<uni-section v-if="isLoad" title="精选内容" type="line">
			<view class="button-box"><gui-image class="gui-image-more" src="/static/list/more.png"
					:width="36" :height="36" />
			</view>
		</uni-section>
		
		<!-- 基于 uni-list 的页面布局 -->
		<uni-list :class="{ 'uni-list--waterfall': formData.waterfall }">
			<view class="uni-list">
				<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<uni-list-item :border="!formData.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
					v-for="item in productList" :key="item._id"
					:to="'/pages/course/detail?id='+item._id+'&title='+item.name">
					<!-- 通过header插槽定义列表左侧图片 -->
					<template v-slot:header>
						<view v-if="!isLoad"  class="uni-thumb demo-bg shop-picture" :class="{ 'shop-picture-column': formData.waterfall }"></view>
						<view v-if="isLoad"  class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
							<image :src="item.goods_thumb" mode="aspectFill"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="shop">
							<view>
								<view v-if="!isLoad" class="uni-title demo-bg demo-title"></view>
								<view v-if="isLoad"  class="uni-title">
									<text class="uni-ellipsis-2">{{ item.name }}</text>
								</view>
								<text v-if="isLoad" class="uni-tag hot-tag">{{ item.goods_tip }}</text>
								<text v-if="isLoad" v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
							</view>
							<view>
								<view v-if="!isLoad" class="uni-note demo-bg demo-tag"></view>
								<view v-if="isLoad"  class="shop-price gui-flex gui-align-items-center gui-space-between">
									<view>
										<text>¥</text>
										<text class="shop-price-text">{{ item.goods_price }}</text>
										<text>.00</text>
									</view>
									<view>
										<view class="sharebox">赚￥2323.4</view>
									</view>
								</view>
								<view v-if="!isLoad" class="uni-note demo-bg demo-space"></view>
								<view v-if="isLoad" class="uni-note">{{ item.comment_count }}人购买 月销量 {{ item.month_sell_count }}
								</view>
								<view v-if="!isLoad" class="uni-note demo-bg demo-space"></view>
								<view v-if="isLoad" class="uni-note ellipsis">
									<text class="uni-ellipsis-1">{{ item.shop_name }}</text>
								</view>
							</view>
						</view>
					</template>
					<!-- 通过body插槽定义商品布局 -->
		
				</uni-list-item>
			</view>
		</uni-list>
		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<uni-load-more v-if="isLoad && (loading || formData.status === 'noMore' )" :status="formData.status" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isLoad:false,
				loading: false,
				// 数据表名
				collection: 'opendb-mall-goods',
				// 查询字段，多个字段用 , 分割
				field: 'goods_thumb,name,goods_tip,tag,goods_price,comment_count,month_sell_count,shop_name',
				productList: [{
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/ted.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}, {
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/xue.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}, {
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/deng.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}, {
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/cp.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}, {
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/ted.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}, {
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/deng.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}, {
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/deng.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}, {
					name: "早起5分钟弓箭步蹲，胜过跑步一小时，瘦腿瘦臀，更显年轻",
					goods_thumb: "/static/list/xueba.png",
					goods_tip: "自营",
					tag: ["手机", "iphone", "笔记本"],
					goods_price: "3499",
					comment_count: "1244",
					month_sell_count: "640",
					shop_name: "飞哥的课程推荐",
				}],
				formData: {
					waterfall: false, // 布局方向切换
					status: 'noMore', // 加载状态
				},
				tipShow: false // 是否显示顶部提示框
			};
		},
		methods: {
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			}
		},
		created() {
			setTimeout(()=>{
				this.isLoad = true
			},1000)
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.formData.status = 'more'
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				this.tipShow = true
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.tipShow = false
				}, 1000)
				uni.stopPullDownRefresh()
			})
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
	};
</script>

<style scoped lang="scss">
	@import '../../common/uni-ui.scss';

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-picture {
		width: 140px;
		height: 120px;
	}

	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}

	.shop-price {
		margin-top: 2px;
		font-size: 12px;
		color: #ff5a5f;
	}

	.shop-price-text {
		font-size: 16px;
	}

	.hot-tag {
		background: #ff5a5f;
		border: none;
		color: #fff;
	}

	.button-box {
		border: 0;
	}

	.uni-link {
		flex-shrink: 0;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.uni-image {
		background: #f8f8f8;
	}
</style>